<template>
  <view class="transfer-receive-container">
    <!-- 查询区域 -->
    <view class="query-section">
      <view class="query-header">
        <text class="query-title">查询调拨单</text>
      </view>

      <!-- 查询输入区域 -->
      <view class="query-input-area">
        <view class="input-group">
          <text class="input-label">扫描调拨单号</text>
          <view class="input-wrapper">
            <input 
              class="query-input" 
              v-model="queryData.transferCode" 
              placeholder="请扫描或输入调拨单号"
              @confirm="handleTransferCodeConfirm"
            />
            <view class="input-icon scan-icon" @click="startScan">
              <uni-icons type="scan" size="16" color="#007AFF"></uni-icons>
            </view>
            <view class="input-icon clear-icon" @click="clearTransferCode">
              <uni-icons type="clear" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 调拨单主表信息 -->
    <view class="transfer-info-section" v-if="transferInfo">
      <view class="info-header">
        <text class="info-title">调拨单信息</text>
        <view class="info-status" :class="getStatusClass(transferInfo.status)">
          {{ getStatusText(transferInfo.status) }}
        </view>
      </view>
      
      <view class="info-content">
        <view class="info-row">
          <text class="info-label">调拨单编号</text>
          <text class="info-value">{{ transferInfo.transferCode }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">调拨单类型</text>
          <text class="info-value">{{ getTransferTypeText(transferInfo.transferType) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">调拨日期</text>
          <text class="info-value">{{ transferInfo.transferDate || '-' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">备注</text>
          <text class="info-value">{{ transferInfo.remark || '-' }}</text>
        </view>
      </view>
      
      <!-- 单据操作按钮 -->
      <view class="transfer-actions" v-if="canOperate">
        <button class="action-btn primary-btn" @click="handleReceiveConfirm" v-if="isReceiveStatus">
          收货确认
        </button>
        <button class="action-btn primary-btn" @click="handlePutawayConfirm" v-if="isPutawayStatus">
          上架确认
        </button>
        <button class="action-btn primary-btn" @click="handleInStockConfirm" v-if="isInStockStatus">
          入库确认
        </button>
      </view>
    </view>

    <!-- 空状态提示 -->
    <view class="empty-state" v-if="transferInfo && transferLines.length === 0">
      <uni-icons type="info-filled" size="60" color="#ccc"></uni-icons>
      <text class="empty-text">该调拨单暂无明细行</text>
    </view>

    <!-- 调拨单行信息列表 -->
    <view class="transfer-lines-section" v-if="transferLines.length > 0">
      <view class="section-header">
        <text class="section-title">调拨明细行</text>
        <text class="section-count">共 {{ transferLines.length }} 行</text>
      </view>
      
      <view class="lines-list">
        <view 
          class="line-item" 
          v-for="line in transferLines" 
          :key="line.lineId"
          @click="enterLineDetail(line)"
        >
          <view class="line-header">
            <view class="line-status" :class="getLineStatusClass(line)">
              {{ getLineStatusText(line) }}
            </view>
          </view>
          
          <view class="line-content">
            <view class="content-grid">
              <view class="grid-item">
                <text class="item-label">物料名称</text>
                <text class="item-value">{{ line.itemName }}</text>
              </view>
              <view class="grid-item">
                <text class="item-label">物料编码</text>
                <text class="item-value">{{ line.itemCode }}</text>
              </view>
              <view class="grid-item" v-if="line.specification">
                <text class="item-label">规格型号</text>
                <text class="item-value">{{ line.specification }}</text>
              </view>
              <view class="grid-item">
                <text class="item-label">转移数量</text>
                <text class="item-value">{{ line.quantityTransfer }} {{ line.unitName || '' }}</text>
              </view>
              <view class="grid-item" v-if="line.batchCode">
                <text class="item-label">批次号</text>
                <text class="item-value">{{ line.batchCode }}</text>
              </view>
              <view class="grid-item">
                <text class="item-label">调出仓库</text>
                <text class="item-value">{{ line.outWarehouseName || '-' }}</text>
              </view>
              <view class="grid-item">
                <text class="item-label">调入仓库</text>
                <text class="item-value">{{ line.inWarehouseName || '-' }}</text>
              </view>
              <view class="grid-item progress-item" v-if="line.details && line.details.length > 0">
                <text class="item-label">收货进度</text>
                <view class="progress-info">
                  <text class="progress-text">{{ getReceivedCount(line.details) }}/{{ getSentCount(line.details) }} {{ line.unitName || '' }}</text>
                  <view class="progress-bar">
                    <view 
                      class="progress-fill" 
                      :style="{ width: getProgressWidth(line) + '%' }"
                    ></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <view class="line-action">
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { 
  getTransferByCode, 
  getTransferById,
  receiveConfirm,
  shelfConfirm,
  execute,
} from '@/api/wm/transfer.js'
import { 
  initScan, 
  startScan as startPdaScan, 
  stopScan, 
  isPdaScanAvailable 
} from '@/utils/pdaScan.js'

export default {
  name: 'TransferReceive',
  data() {
    return {
      STATUS: {
        PREPARE: 'PREPARE',
        APPROVING: 'APPROVING',
        APPROVED: 'APPROVED',
        UN_OUT_STOCK: 'UN_OUT_STOCK',
        OUT_STOCKED: 'OUT_STOCKED',
        UN_IN_STOCK: 'UN_IN_STOCK',
        IN_STOCKED: 'IN_STOCKED',
        FINISHED: 'FINISHED',
        CANCELED: 'CANCELED'
      },
      queryData: {
        transferCode: '', // 调拨单编号
        transferId: null  // 调拨单ID
      },
      transferInfo: null,
      transferLines: [], // 调拨单行信息
      loading: false
    }
  },
  
  computed: {
    // 是否可以操作（只能操作发货确认后的状态：OUT_STOCKED、UN_IN_STOCK、IN_STOCKED）
    canOperate() {
      if (!this.transferInfo) return false
      // 调拨接收只能操作发货确认后的状态
      return this.transferInfo.status === this.STATUS.OUT_STOCKED || 
             this.transferInfo.status === this.STATUS.UN_IN_STOCK ||
             this.transferInfo.status === this.STATUS.IN_STOCKED
    },
    
    // 是否显示收货确认按钮（OUT_STOCKED状态）
    isReceiveStatus() {
      if (!this.transferInfo) return false
      return this.transferInfo.status === this.STATUS.OUT_STOCKED
    },
    
    // 是否显示上架确认按钮（UN_IN_STOCK状态）
    isPutawayStatus() {
      if (!this.transferInfo) return false
      return this.transferInfo.status === this.STATUS.UN_IN_STOCK
    },
    
    // 是否显示入库确认按钮（IN_STOCKED状态）
    isInStockStatus() {
      if (!this.transferInfo) return false
      return this.transferInfo.status === this.STATUS.IN_STOCKED
    }
  },
  
  mounted() {
    // 初始化PDA扫描监听（只初始化，不启动）
    if (isPdaScanAvailable()) {
      initScan(this.handlePdaScanResult, 'TransferReceive')
    }
  },
  
  onShow() {
    // 页面显示时重新初始化并启动PDA扫描
    if (isPdaScanAvailable()) {
      initScan(this.handlePdaScanResult, 'TransferReceive')
      startPdaScan('TransferReceive')
    }
    
    // 页面显示时刷新数据（从detail页面返回时）
    if (this.queryData.transferId) {
      this.refreshTransferData()
    }
  },
  
  onHide() {
    // 页面隐藏时停止PDA扫描，防止在详情页中误触发
    if (isPdaScanAvailable()) {
      stopScan('TransferReceive')
    }
  },
  
  beforeDestroy() {
    // 页面销毁时停止PDA扫描监听
    if (isPdaScanAvailable()) {
      stopScan('TransferReceive')
    }
  },
  
  methods: {
    // 清空查询数据（完全重置）
    clearQueryData() {
      this.queryData = {
        transferCode: '',
        transferId: null
      }
      this.transferInfo = null
      this.transferLines = []
    },
    
    // 清空调拨单号（只清空输入框，保留已查询的数据）
    clearTransferCode() {
      this.queryData.transferCode = ''
      // 不清空 transferId 和显示数据，保持当前查询结果
    },
    
    // 开始扫描（相机扫码方式）
    startScan() {
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          this.queryData.transferCode = res.result
          this.handleTransferCodeConfirm()
        },
        fail: () => {
          uni.showToast({ title: '扫码失败', icon: 'none' })
        }
      })
    },
    
    // 处理PDA扫描结果（广播扫描方式）
    handlePdaScanResult(code) {
      console.log('PDA扫描结果:', code)
      
      if (!code || !code.trim()) {
        console.log('扫描结果为空')
        return
      }
      
      const scanData = code.trim()
      
      // 设置调拨单号并自动执行查询
      this.queryData.transferCode = scanData
      this.handleTransferCodeConfirm()
    },
    
    // 处理调拨单号确认
    handleTransferCodeConfirm() {
      if (!this.queryData.transferCode.trim()) {
        uni.showToast({
          title: '调拨单号为空，请检查！',
          icon: 'none'
        })
        return
      }
      
      this.queryTransferByCode()
    },
    
    
    // 根据调拨单编号查询调拨单（初始查询）
    queryTransferByCode() {
      if (!this.queryData.transferCode.trim()) {
        uni.showToast({ title: '请输入调拨单编号', icon: 'none' })
        return
      }
      
      uni.showLoading({ title: '查询中...' })
      
      getTransferByCode(this.queryData.transferCode).then(response => {
        const data = response.data
        this.transferInfo = data.transfer
        this.transferLines = data.transferLines || []
        
        // 查询成功后保存transferId，用于后续刷新
        if (this.transferInfo && this.transferInfo.transferId) {
          this.queryData.transferId = this.transferInfo.transferId
        }
        
        // 查询成功后清空输入框
        this.clearTransferCode()
      }).catch(error => {
        console.log('查询调拨单失败:', error)
        if (error !== '500') {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
        this.transferInfo = null
        this.transferLines = []
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 根据调拨单ID刷新数据（后续查询）
    refreshTransferById() {
      if (!this.queryData.transferId) {
        return
      }
      
      uni.showLoading({ title: '刷新中...' })
      
      getTransferById(this.queryData.transferId).then(response => {
        const data = response.data
        this.transferInfo = data.transfer
        this.transferLines = data.transferLines || []
      }).catch(error => {
        console.log('刷新调拨单失败:', error)
        if (error !== '500') {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
        this.transferInfo = null
        this.transferLines = []
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 刷新调拨单数据（主表和行表）
    refreshTransferData() {
      if (!this.queryData.transferId) {
        return
      }
      
      // 使用新的刷新方法
      this.refreshTransferById()
    },
    
    // 进入行明细操作页面（收货模式）
    enterLineDetail(line) {
      if (!this.transferInfo) {
        uni.showToast({ title: '调拨单信息不存在', icon: 'none' })
        return
      }
      
      const status = this.transferInfo.status
      
      // 业务状态检查：PREPARE、APPROVING、CANCELED、UN_OUT_STOCK不能进入明细
      if (status === this.STATUS.PREPARE || 
          status === this.STATUS.APPROVING || 
          status === this.STATUS.CANCELED ||
          status === this.STATUS.UN_OUT_STOCK) {
        // 无明细或不能查看明细
        return
      }
      
      // FINISHED可以查看明细
      // 其他状态（OUT_STOCKED、UN_IN_STOCK、IN_STOCKED）都可以进入明细
      
      // 跳转到调拨明细收货页面，传递必要的参数
      uni.navigateTo({
        url: `/pages/app/transfer/detail-receive?lineId=${line.lineId}&transferId=${this.transferInfo.transferId}&transferCode=${this.transferInfo.transferCode}&transferStatus=${this.transferInfo.status}`
      })
    },
    
    // 收货确认
    handleReceiveConfirm() {
      if (!this.transferInfo) return
      
      uni.showModal({
        title: '确认收货',
        content: '确认对调拨单进行收货确认吗？',
        confirmText: '确认',
        cancelText: '取消',
        success: (res) => {
          if (!res.confirm) return
          
          uni.showLoading({ title: '确认中...' })
          
          receiveConfirm(this.transferInfo.transferId).then(response => {
            uni.showToast({ title: '收货确认成功', icon: 'success' })
            this.refreshTransferData()
          }).catch(error => {
            if (error !== '500') {
              uni.showToast({ title: '网络异常，请检查网络连接后重试', icon: 'none' })
            }
          }).finally(() => {
            uni.hideLoading()
          })
        }
      })
    },
    
    // 上架确认
    handlePutawayConfirm() {
      if (!this.transferInfo) return
      
      uni.showModal({
        title: '确认上架',
        content: '确认对调拨单进行上架确认吗？',
        confirmText: '确认',
        cancelText: '取消',
        success: (res) => {
          if (!res.confirm) return
          
          uni.showLoading({ title: '确认中...' })
          
          shelfConfirm(this.transferInfo.transferId).then(response => {
            uni.showToast({ title: '上架确认成功', icon: 'success' })
            this.refreshTransferData()
          }).catch(error => {
            if (error !== '500') {
              uni.showToast({ title: '网络异常，请检查网络连接后重试', icon: 'none' })
            }
          }).finally(() => {
            uni.hideLoading()
          })
        }
      })
    },
    
    // 入库确认
    handleInStockConfirm() {
      if (!this.transferInfo) return
      
      uni.showModal({
        title: '确认入库',
        content: '确认对调拨单进行入库确认吗？',
        confirmText: '确认',
        cancelText: '取消',
        success: (res) => {
          if (!res.confirm) return
          
          uni.showLoading({ title: '确认中...' })
          
          execute(this.transferInfo.transferId).then(response => {
            uni.showToast({ title: '入库确认成功', icon: 'success' })
            this.refreshTransferData()
          }).catch(error => {
            if (error !== '500') {
              uni.showToast({ title: '网络异常，请检查网络连接后重试', icon: 'none' })
            }
          }).finally(() => {
            uni.hideLoading()
          })
        }
      })
    },
    
    // 获取行状态文本（调拨接收只关注上架状态）
    getLineStatusText(line) {
      const sentCount = this.getSentCount(line.details)
      const receivedCount = this.getReceivedCount(line.details)
      
      if (sentCount === 0) {
        return '待发货'
      }
      
      if (receivedCount === sentCount) {
        return '已上架'
      } else if (receivedCount > 0) {
        return '部分上架'
      } else {
        return '待上架'
      }
    },
    
    // 获取行状态样式（调拨接收只关注上架状态）
    getLineStatusClass(line) {
      const sentCount = this.getSentCount(line.details)
      const receivedCount = this.getReceivedCount(line.details)
      
      if (sentCount === 0) {
        return 'status-waiting'
      }
      
      if (receivedCount === sentCount) {
        return 'status-received'
      } else if (receivedCount > 0) {
        return 'status-partial'
      } else {
        return 'status-pending'
      }
    },
    
    // 获取已发出数量（按实际数量计算）
    getSentCount(details) {
      if (!details || details.length === 0) return 0
      return details
        .filter(detail => detail.itemStatus === 1 || detail.itemStatus === 2)
        .reduce((total, detail) => total + (detail.quantity || 0), 0)
    },
    
    // 获取已收货数量
    getReceivedCount(details) {
      if (!details || details.length === 0) return 0
      return details
        .filter(detail => detail.itemStatus === 2)
        .reduce((total, detail) => total + (detail.quantity || 0), 0)
    },
    
    // 获取总数量
    getTotalCount(line) {
      if (!line || !line.quantityTransfer) return 0
      return line.quantityTransfer
    },
    
    // 获取进度百分比（收货进度）
    getProgressWidth(line) {
      const sentCount = this.getSentCount(line.details)
      if (sentCount === 0) return 0
      const receivedCount = this.getReceivedCount(line.details)
      return Math.round((receivedCount / sentCount) * 100)
    },
    
    // 获取状态文本（根据字典配置）
    getStatusText(status) {
      const map = {
        'PREPARE': '草稿',
        'APPROVING': '审核中',
        'APPROVED': '已审核',
        'UN_OUT_STOCK': '待发货',
        'OUT_STOCKED': '待收货',
        'UN_IN_STOCK': '待上架',
        'IN_STOCKED': '已上架',
        'FINISHED': '已完成',
        'CANCELED': '已取消'
      }
      return map[status] || status
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const map = {
        'PREPARE': 'status-draft',
        'APPROVING': 'status-approving',
        'APPROVED': 'status-approved',
        'UN_OUT_STOCK': 'status-pending',
        'OUT_STOCKED': 'status-sent',
        'UN_IN_STOCK': 'status-waiting',
        'IN_STOCKED': 'status-received',
        'FINISHED': 'status-completed',
        'CANCELED': 'status-cancelled'
      }
      return map[status] || 'status-default'
    },
    
    // 获取调拨类型文本（根据字典配置）
    getTransferTypeText(transferType) {
      const map = {
        'INNER': '内部转移',
        'OUTER': '外部转移'
      }
      return map[transferType] || transferType || '-'
    },
  }
}
</script>

<style lang="scss" scoped>
.transfer-receive-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}


.query-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.query-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .query-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.query-input-area {
  .input-group {
    .input-label {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 15rpx;
    }
    
    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      
      .query-input {
        flex: 1;
        height: 80rpx;
        padding: 0 100rpx 0 20rpx;
        border: 2rpx solid #e0e0e0;
        border-radius: 12rpx;
        font-size: 28rpx;
      }
      
      .input-icon {
        position: absolute;
        padding: 10rpx;
        border-radius: 50%;
        
        &.scan-icon {
          right: 60rpx;
          background: rgba(40,167,69,0.08);
        }
        
        &.clear-icon {
          right: 16rpx;
        }
      }
    }
  }
}

.transfer-info-section, .details-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.info-header, .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .info-title, .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .info-status {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 22rpx;
    
    &.status-draft { background: #f8f9fa; color: #6c757d; }
    &.status-approving { background: #f0f4c3; color: #558b2f; }
    &.status-approved { background: #e1f5fe; color: #0277bd; }
    &.status-pending { background: #fff3cd; color: #856404; }
    &.status-sent { background: #c8e6c9; color: #2e7d32; }
    &.status-waiting { background: #ffe0b2; color: #e65100; }
    &.status-received { background: #d4edda; color: #155724; }
    &.status-completed { background: #d4edda; color: #155724; }
    &.status-cancelled { background: #f8d7da; color: #721c24; }
  }
  
  .section-count {
    font-size: 24rpx;
    color: #666;
  }
}

.info-content {
  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 12rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 26rpx;
      color: #666;
      min-width: 140rpx;
      
      .required {
        color: #ff4757;
        margin-left: 4rpx;
      }
    }
    
    .info-value {
      font-size: 26rpx;
      color: #333;
      flex: 1;
      text-align: right;
    }
  }
}

// 调拨行列表样式
.transfer-lines-section {
  .lines-list {
    margin-top: 20rpx;
    
    .line-item {
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      padding: 24rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
      }
      
      .line-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        
        .line-number {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }
        
        .line-status {
          padding: 6rpx 12rpx;
          border-radius: 16rpx;
          font-size: 22rpx;
          font-weight: bold;
          
          &.status-pending {
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            color: #d63031;
          }
          
          &.status-partial {
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            color: #fff;
          }
          
          &.status-completed {
            background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);
            color: #fff;
          }
          
          &.status-received {
            background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
            color: #fff;
          }
          
          &.status-waiting {
            background: #f8f9fa;
            color: #6c757d;
          }
          
          &.status-no-details {
            background: #f8f9fa;
            color: #6c757d;
          }
        }
      }
      
      .line-content {
        .content-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16rpx 20rpx;
          
          .grid-item {
            display: flex;
            flex-direction: column;
            
            .item-label {
              font-size: 22rpx;
              color: #666;
              margin-bottom: 6rpx;
            }
            
            .item-value {
              font-size: 24rpx;
              color: #333;
              font-weight: 500;
              word-break: break-all;
            }
            
            &.progress-item {
              grid-column: 1 / -1;
              
              .progress-info {
                display: flex;
                flex-direction: column;
                gap: 8rpx;
                
                .progress-text {
                  font-size: 24rpx;
                  color: #333;
                  font-weight: 500;
                }
                
                .progress-bar {
                  height: 8rpx;
                  background: #e9ecef;
                  border-radius: 4rpx;
                  overflow: hidden;
                  
                  .progress-fill {
                    height: 100%;
                    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
                    border-radius: 4rpx;
                    transition: width 0.3s ease;
                  }
                }
              }
            }
          }
        }
      }
      
      .line-action {
        position: absolute;
        right: 24rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.operation-tips {
  background: #e3f2fd;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .tip-item {
    display: flex;
    align-items: center;
    gap: 12rpx;
    
    .tip-text {
      font-size: 24rpx;
      color: #1976d2;
    }
  }
}

.empty-state {
  background: #fff;
  border-radius: 12rpx;
  padding: 80rpx 30rpx;
  margin-bottom: 20rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .empty-text {
    display: block;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #999;
  }
}

.transfer-actions {
  margin-top: 20rpx;
  display: flex;
  gap: 20rpx;
  
  .action-btn {
    flex: 1;
    height: 70rpx;
    border-radius: 35rpx;
    border: none;
    font-size: 28rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.primary-btn {
      background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
      color: #fff;
      box-shadow: 0 4rpx 12rpx rgba(40, 167, 69, 0.3);
      
      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(40, 167, 69, 0.3);
      }
    }
  }
}

</style>
